<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
<title>Estevez Seguros</title>

<link rel="stylesheet" href="/seguros/css/fullcalendar/fullcalendar.css">
<link rel="stylesheet" href="/seguros/css/fullcalendar/fullcalendar.print.css" media="print">

<script type="text/javascript" src="/seguros/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/seguros/js/jquery.tmpl.js"></script>
<script type="text/javascript" src="/seguros/js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="/seguros/js/ui/jquery.ui.core.js"></script>
<script src="/seguros/js/ui/jquery.ui.widget.js"></script>
<script src="/seguros/js/ui/jquery.ui.position.js"></script>
<script src="/seguros/js/ui/jquery.ui.autocomplete.js"></script>
<script src="/seguros/js/fullcalendar/fullcalendar.min.js"></script>
<script src="/seguros/js/bootstrap/bootstrap.js"></script>
<link rel="stylesheet" href="/seguros/css/seguros.css" />
<link rel="stylesheet" href="/seguros/css/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="/seguros/css/bootstrap/css/bootstrap-responsive.css" />
<link rel="stylesheet" href="/seguros/css/bootstrap/css/bootstrap.css" />

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						var date = new Date();
						var d = date.getDate();
						var m = date.getMonth();
						var y = date.getFullYear();

						$('#calendar').fullCalendar({
							header : {
								left : 'prev,next today',
								center : 'title',
								right : 'month,agendaWeek,agendaDay'
							},
							editable : true,
							events : [ {
								title : 'All Day Event',
								start : new Date(y, m, 1),
								editable : true
							}, {
								title : 'Long Event',
								start : new Date(y, m, d - 5),
								end : new Date(y, m, d - 2)
							}, {
								id : 999,
								title : 'Repeating Event',
								start : new Date(y, m, d - 3, 16, 0),
								allDay : false
							}, {
								id : 999,
								title : 'Repeating Event',
								start : new Date(y, m, d + 4, 16, 0),
								allDay : false
							}, {
								title : 'Meeting',
								start : new Date(y, m, d, 10, 30),
								allDay : false
							}, {
								title : 'Lunch',
								start : new Date(y, m, d, 12, 0),
								end : new Date(y, m, d, 14, 0),
								allDay : false
							}, {
								title : 'Birthday Party',
								start : new Date(y, m, d + 1, 19, 0),
								end : new Date(y, m, d + 1, 22, 30),
								allDay : false
							}, {
								title : 'Click for Google',
								start : new Date(y, m, 28),
								end : new Date(y, m, 29),
								url : 'http://google.com/'
							} ]
						});

						var availableTags = [ "Fabian", "Walter", "Claudio" ];

						var contactoSeleccionado = false;

						$("#tags")
								.autocomplete(
										{
											source : availableTags,
											select : function(event, ui) {
												contactoSeleccionado = true;

												var fabian = [ {
													nombre : "Fabian",
													apellido : "Cervinio",
													email : "fabian@mail.com"
												} ];

												var walter = [ {
													nombre : "Walter",
													apellido : "Decara",
													email : "walter@mail.com"
												}, ];

												var claudio = [ {
													nombre : "Claudio",
													apellido : "Voltich",
													email : "claudio@mail.com"
												} ];

												var contactos = "<tr><td>${apellido}</td><td>${nombre}</td><td>${email}</td></tr>"

												/* Compile markup string as a named template */
												$.template("contactosTemplate",
														contactos);

												if (ui.item.value == "Fabian") {
													contactosElegido = fabian;
												}

												if (ui.item.value == "Walter") {
													contactosElegido = walter;
												}

												if (ui.item.value == "Claudio") {
													contactosElegido = claudio;
												}

												$("#contactosLista").empty();
												$
														.tmpl(
																"contactosTemplate",
																contactosElegido)
														.appendTo(
																"#contactosLista");

												$("#contactos").show();
											}
										})
								.keydown(
										function(e) {
											if (e.keyCode === 13) {
												if (!contactoSeleccionado) {
													contactoSeleccionado = false;
													var datos = [
															{
																nombre : "Claudio",
																apellido : "Voltich",
																email : "claudio@mail.com"
															},
															{
																nombre : "Alejandra",
																apellido : "Lores",
																email : "ale@mail.com"
															} ];

													var contactos = "<tr><td>${apellido}</td><td>${nombre}</td><td>${email}</td></tr>"

													/* Compile markup string as a named template */
													$
															.template(
																	"contactosTemplate",
																	contactos);
													$("#contactosLista")
															.empty();
													$.tmpl("contactosTemplate",
															datos).appendTo(
															"#contactosLista");

													$("#contactos").show();
												}
												console.log($("#tags").val())
											}
										});

					});

	/* Render the named template */
	$("#contactosLista").empty();

	$(".stripeMe tr").mouseover(function() {
		$(this).addClass("over");
	}).mouseout(function() {
		$(this).removeClass("over");
	});
</script>
<style type='text/css'>
body {
	margin-top: 40px;
	text-align: center;
	font-size: 14px;
	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
	width: 900px;
	margin: 0 auto;
}
</style>

</head>
<body>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
                <!--Sidebar content-->
                <div class="well" style="padding: 8px 0;">
                    <ul class="nav nav-list">
                        <li class="active"><a href="/seguros/"><i class="icon-white icon-home"></i> Home</a></li>
                        <li><a href="/seguros/contactos.jsp"><i class="icon-book"></i> Contactos</a></li>
                        <li><a href="/seguros/calendario.jsp"><i class="icon-calendar"></i> Calendario</a></li>
                        <li class="nav-header">Configuraci&oacute;n</li>
                        <li><a href="#usuarios"><i class="icon-user"></i> Usuarios</a></li>
                        <li><a href="#settings"><i class="icon-cog"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#help"><i class="icon-flag"></i> Help</a></li>
                    </ul>
                </div>
            </div>
            <div class="span10">
                <!--Body content-->
                <div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="item">
                            <img src="images/IMG_0285.jpg" alt="">
                            <div class="carousel-caption">
                                <h4>Exposicion 2009</h4>
                                <p>Exposicion 2009 (Avellaneda)</p>
                            </div>
                            <img src="images/bootstrap-mdo-sfmoma-01.jpg" alt="">
                            <div class="carousel-caption">
                                <h4>First Thumbnail label</h4>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
                                    Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="images/bootstrap-mdo-sfmoma-02.jpg" alt="">
                            <div class="carousel-caption">
                                <h4>Second Thumbnail label</h4>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
                                    Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                        <div class="item active">
                            <img src="images/bootstrap-mdo-sfmoma-03.jpg" alt="">
                            <div class="carousel-caption">
                                <h4>Third Thumbnail label</h4>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
                                    Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel"
                        data-slide="next">&rsaquo;</a>
                </div>



            </div>
        </div>
    </div>
</body>
</html>
